<template>
	<div class="bigrole">
		<div class="role">
			<i class="el-icon-s-data">书城管理 ——</i>
			<span>一级类型</span>
		</div>
		<hr />
		<el-button class="add1" @click="goadd()">添加类型</el-button>
		<el-dialog :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
			<el-form label-width="80px">
				<el-form-item label="类型pid :">
					<el-input v-model="oneType.pid" type="number" readonly placeholder="添加更改无需输入id"></el-input>
				</el-form-item>
				<el-form-item label="类型名称:">
					<el-input v-model="oneType.name" type="text"></el-input>
				</el-form-item>
				<el-form-item label="显示顺序">
					<el-input v-model="oneType.prio" type="number"></el-input>
				</el-form-item>
			</el-form>

			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="add()">保存</el-button>

			</span>
		</el-dialog>
		<div class="oneTab">
			<el-table :data="bigList">
				<el-table-column prop="id" label="一级类型id"></el-table-column>
				<el-table-column prop="prio" label="一级类型顺序"></el-table-column>
				<el-table-column prop="name" label="一级类型名称"></el-table-column>
				<el-table-column label="修改">
					<template slot-scope="scope">
						<el-button style="border: none; color: white; background-color: skyblue;"
							@click="goupd(scope.row)">修改</el-button>
					</template>

				</el-table-column>
				<el-table-column label="二级类型名称">
					<template slot-scope="scope">
						<el-table :data="scope.row.son">
							<el-table-column prop="name"></el-table-column>
						</el-table>
					</template>
				</el-table-column>

			</el-table>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'typeOne',
		data() {
			return {
				oneList: [],
				twoList: [],
				bigList: [],
				cpList: [],
				dialogVisible: false,
				dialogVisible2: false,
				oneType: {}
			}
		},
		methods: {
			goupd(t) {
				this.$router.push({
					path: '/bookbackend/roleupdate',
					query: {
						dx: t
					}
				});
			},
			goadd() {

				this.oneType = {};
				this.dialogVisible = true;
			},
			add() {
				console.log(this.oneType);
				this.oneType.id = 0;
				this.oneType.pid = 0;
				this.$postkv("/api/adm/type/add", this.oneType).then((resp) => {
					console.log(resp.data.data);
					this.bigList = [];
					this.twoList = [];
					this.oneList = [];
					this.show();
				})

			},

			handleClose(done) {
				this.$confirm('确认关闭？')
					.then(_ => {
						done();
					})
					.catch(_ => {});
			},


			show() {
				this.$get("/api/adm/type/findAll2").then((resp) => {
					console.log(resp.data.data);
					let list = resp.data.data;
					console.log(list);
					list.forEach((item, i) => {
						console.log(item.prio);
						if (item.prio < 10000) {
							this.oneList.push(item);
						} else {
							this.twoList.push(item)
						}
					})

					console.log("一级类型:" + this.oneList);
					this.oneList.forEach((item) => {
						console.log(item.name);
						this.bigList.push(item);

					});
					console.log("====================================");
					this.bigList.forEach((item, i) => {
						console.log(item.id + item.name);
						item.son = [];
						this.twoList.forEach((itemm, i) => {
							if (item.id == itemm.pid) {
								item.son.push(itemm);
							}

						})
					})
					console.log("====================================");
					for (let i in this.bigList) {
						for (let j of this.bigList[i].son) {
							// console.log(this.bigList[i].son.[j].name);
							console.log(this.bigList[i].name + j.name);

						}
					}
				});
			}
		},
		mounted() {

			this.show();
		}
	}
</script>

<style>
	.bigrole {
		width: 90%;
		margin-left: 2%;
	}

	.bigrole button.add1 {
		background-color: #189F92;
		color: white;
	}

	.role {
		width: 100%;
	}

	.role i {
		margin-left: 1%;
		margin-top: 3%;
		color: #bfb8b3;
	}

	.role span {
		margin-left: 1%;
	}

	.oneTab table {
		width: 30%;
	}
</style>